<template>
	<view class='b-white d-table mb-20'>
		<view v-if="needTitle" class='mgt20 mgl10 mgr10 d-flex justify-between'>
			<text class='fs16 font-e3'>{{title}}</text>
			<text class='fs16 font-e3'>{{extra}}</text>
		</view>
		<view class='h-100 tab-head mgl10 mgr10 mgt10 d-flex justify-between align-center' :class="needTitle ? 'border-top-1' : ''">
			<view v-for="(col) in columns" :key="col.dataIndex"
				  :style="[{width:col.width? `${col.width}`:'auto',flex:col.width ? 'auto' : 1,textAlign:col.center ? col.center :'center'}]">
				<text class='fs14 text-c5'>{{col.title}}</text>
			</view>
		</view>
		<view class="mgb20" style="padding: 30px 0;" v-if="dataSource.length==0">
			<empty-data class-name="w-50" style-name="padding: 0;" />
		</view>
		<view v-else>
			<view v-for='(item) in dataSource' :key='item[rowKey]' class='tab-item mgl10 mgr10 d-flex justify-between align-center border-top-1'>
				<view v-for="(col) in columns" :key="col.dataIndex"
					  :style="[{width:col.width? `${col.width}`:'auto',flex:col.width ? 'auto' : 1,textAlign:col.center ? col.center :'center'}]">
					<text class='font-14 font-c65'>{{item[col.dataIndex]}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'tableComp',
		props: {
			needTitle:{
				type: Boolean,
				default: false
			},
			title: {
				type: String,
				default:''
			},
			extra: {
				type: String,
				default: ''
			},
			rowKey: {
				type:String,
				default: 'id'
			},
			columns: {
				//
				type: Array,
				default () {
					return [{
						title: '序号',
						dataIndex: 'no',
						width: '33.33%',
						render: null
					},
						{
							title: '名称',
							dataIndex: 'name',
							width: '33.33%',
							render: null
						},
						{
							title: '操作',
							width: '33.33%',
							dataIndex: 'act',
							render: function(text, record, rowIndex) {
								return {}
							}
						},
					]
				}
			},
			dataSource: {
				type: Array,
				default () {
					return [
						// {
						// 	no: 1,
						// 	name: '111'
						// },
						// {
						// 	no: 2,
						// 	name: '撒旦法撒旦法水电费离开水电费撒旦法撒旦法的'
						// },
					]
				}
			}
		},
		data() {
			return {}
		},
		methods: {},
	}
</script>

<style scoped lang="scss">
	@import "../common/common.scss";
	.tab-head {
		height: 69upx;
	}

	.tab-item {
		height: 72upx;
	}

	.w-20 {
		width: 20%;
		/* border:1px red solid; */
	}

	.w-40 {
		width: 40%;
		/* border:1px red solid; */
	}

	.scanner {
		widht: 100%;
		height: 200upx;
		background: #FFFFFF;
	}
</style>
